<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/houseing' }"><span style="font-size: 18px;">房源管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top">
				<span style="margin-left: 10px;">搜索:</span>
				<input type="text" placeholder="请输入标题" v-model="ss">
				<button :class="isActive?'buttontwo':'button'" @click="seach()">查询</button>
				<button class="buttontwo" @click="newbuild">新建</button>
			</div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号">
						</el-table-column>
						<el-table-column prop="title" label="标题">
						</el-table-column>
						<el-table-column prop="describes" label="描述">
						</el-table-column>
						<el-table-column prop="phone" label="手机号">
						</el-table-column>
						<el-table-column prop="price" label="价格">
						</el-table-column>
						<el-table-column prop="area" label="面积">
						</el-table-column>
						<el-table-column prop="district" label="区域">
						</el-table-column>
						<el-table-column prop="plot_site" label="小区">
						</el-table-column>
						<el-table-column prop="deploy" label="配置">
						</el-table-column>
						<el-table-column prop="type" label="类型">
						</el-table-column>
						<el-table-column prop="floor_sum" label="楼层总数">
						</el-table-column>
						<el-table-column prop="floor" label="所处楼层">
						</el-table-column>
						<el-table-column prop="cz" label="操作" width="180">
							<template slot-scope="scope">
								<span class="jr" @click="compile(scope.row.id,scope.row)">编辑</span>
								<span class="jr" @click="del(scope.row.id)">删除</span>
								<el-dropdown trigger="click" @command="allot">
									<span class="jr" @click="fp(scope.row.id)">分配</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item v-for="item in brokerlist" :command="item.id"
											icon="el-icon-plus">{{item.name}}</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>

							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<el-dialog title="新建" :visible.sync="centerDialogVisible" width="40%" center>
				<el-form :model="form">
					<el-form-item label="房屋类型">
						<el-select v-model="form.state" placeholder="请选择房屋类型" style="width: 60%;">
							<el-option label="新房" value="1"></el-option>
							<el-option label="二手房" value="2"></el-option>
							<el-option label="租房" value="3"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="标题">
						<el-input v-model="form.title" autocomplete="off" style="width: 60%;" placeholder="请填写标题">
						</el-input>
					</el-form-item>
					<el-form-item label="联系人">
						<el-input v-model="form.phone" style="width: 60%;" placeholder="请填写联系人"></el-input>
					</el-form-item>
					<el-form-item label="所属小区">
						<el-select v-model="form.plot_id" placeholder="所属小区" style="width: 60%;">
							<el-option v-for="item in plotlist" :label="item.plot_site" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="房产类型">
						<el-select v-model="form.type" placeholder="请选择房产类型" style="width: 60%;">
							<el-option label="商铺/门面房" value="商铺/门面房"></el-option>
							<el-option label="厂房" value="厂房"></el-option>
							<el-option label="写字楼" value="写字楼"></el-option>
							<el-option label="小高层住宅" value="小高层住宅"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属区域">
						<el-select v-model="form.district" placeholder="请选择所属区域" style="width: 60%;">
							<el-option label="怀柔" value="怀柔"></el-option>
							<el-option label="昌平" value="昌平"></el-option>
							<el-option label="海淀" value="海淀"></el-option>
							<el-option label="朝阳" value="朝阳"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="户型/朝向/装修">
						<el-select v-model="form.deploy" placeholder="请选择户型" style="width: 60%;">
							<el-option label="1室1厅1卫" value="1室1厅1卫"></el-option>
							<el-option label="2室2厅2卫" value="2室2厅2卫"></el-option>
							<el-option label="3室3厅3卫" value="3室3厅3卫"></el-option>
							<el-option label="3室1厅1卫" value="3室1厅1卫"></el-option>
							<el-option label="2室3厅1卫" value="2室3厅1卫"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所在楼层">
						<el-input v-model="form.floor" style="width: 30%;" placeholder="请填写所在楼层"></el-input>
						<el-input v-model="form.floor_sum" style="width: 30%;margin-left: 10px;"
							placeholder="请填写所在楼层总层数"></el-input>
					</el-form-item>
					<el-form-item label="房屋面积">
						<el-input v-model="form.area" style="width: 60%;" placeholder="请填写房屋面积"></el-input>
					</el-form-item>
					<el-form-item label="房屋售价">
						<el-input v-model="form.price" style="width: 60%;" placeholder="请填写房屋售价"></el-input>
					</el-form-item>
					<el-form-item label="描述">
						<el-input type="textarea" v-model="form.describes" style="width: 60%;"></el-input>
					</el-form-item>
				</el-form>
				<el-button @click="upimg" style="margin-left: 40px;">上传图片</el-button>
				<el-dialog width="30%" title="图片上传" :visible.sync="innerVisible" append-to-body>
					<p>室内图片上传</p>
					<div style="margin-left: 40px;">
						<el-upload :action="url" :auto-upload="false" :on-change="beforeUpload1"
							list-type="picture-card" multiple>
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
					<p>户型图片上传</p>
					<div style="margin-left: 40px;">
						<el-upload :action="url" :auto-upload="false" :on-change="beforeUpload2"
							list-type="picture-card" multiple>
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
					<p>室外图片上传</p>
					<div style="margin-left: 40px;">
						<el-upload :action="url" :auto-upload="false" :on-change="beforeUpload3"
							list-type="picture-card" multiple>
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
					<p>封面图片上传</p>
					<div style="margin-left: 40px;">
						<el-upload :action="url" :auto-upload="false" :on-change="beforeUpload4"
							list-type="picture-card" multiple>
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
				</el-dialog>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				ss: '',
				isActive: false,
				centerDialogVisible: false,
				isup: false,
				form: {
					state: '',
					title: '',
					describes: '',
					phone: '',
					plot_id: '',
					type: '',
					district: '',
					deploy: '',
					floor: '',
					floor_sum: '',
					area: '',
					price: ''
				},
				plotlist: [],
				id: '',
				innerVisible: false,
				url: 'http://localhost:3000/admin/uphousesimg?token=' + this.$store.state.admin.token,
				brokerlist: [],
				housesid: ''
			}
		},
		watch: {
			ss(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			}
		},
		mounted() {
			this.gethouses()
			this.getbroker()
		},
		methods: {
			fp(id) {
				this.housesid = id
			},
			allot(id) {
				var _this = this
				axios.post('/allotbroker', {
					broker_id: id,
					id: this.housesid
				}).then(function(res) {
					console.log(res)
					_this.$message({
						message: res.data.msg
					})
				})
			},
			getbroker() {
				var _this = this
				axios.get('/getbroker').then(function(res) {
					console.log(res)
					_this.brokerlist = res.data.res
				})
			},
			upimg() {
				this.innerVisible = true
			},
			gethouses() {
				var _this = this
				axios.get('/gethouses').then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			getplot() {
				var _this = this
				axios.get('/getplot').then(function(res) {
					console.log(res)
					_this.plotlist = res.data.res
				})
			},
			seach() {
				var _this = this
				axios.get('/gethouses', {
					params: {
						title: this.ss
					}
				}).then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			newbuild() {
				this.centerDialogVisible = true
				this.getplot()
			},
			compile(id, data) {
				this.form = data
				this.id = id
				this.centerDialogVisible = true
				this.getplot()
				this.isup = true
			},
			del(id) {
				var _this = this
				axios.get('/delhouses', {
					params: {
						id
					}
				}).then(function(res) {
					console.log(res)
					_this.gethouses()
				})
			},
			submit() {
				if (this.isup) {
					var _this = this
					axios.post('/sethouses', {
						id: this.id,
						title: this.form.title,
						state: this.form.state,
						describes: this.form.describes,
						phone: this.form.phone,
						plot_id: this.form.plot_id,
						type: this.form.type,
						district: this.form.district,
						deploy: this.form.deploy,
						floor: this.form.floor,
						floor_sum: this.form.floor_sum,
						area: this.form.area,
						price: this.form.price
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.centerDialogVisible = false
							_this.gethouses()
							_this.form = {}
							_this.id = ''
							_this.isup = false
							_this.$message({
								message: res.data.msg
							})
						}
					})
				} else {
					console.log(this.form)
					var _this = this
					axios.post('/addhouses', {
						title: this.form.title,
						state: this.form.state,
						describes: this.form.describes,
						phone: this.form.phone,
						plot_id: this.form.plot_id,
						type: this.form.type,
						district: this.form.district,
						deploy: this.form.deploy,
						floor: this.form.floor,
						floor_sum: this.form.floor_sum,
						area: this.form.area,
						price: this.form.price
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.centerDialogVisible = false
							_this.gethouses()
							_this.form = {}
							_this.setimg()
							_this.$message({
								message: res.data.msg
							})
						}
					})
				}
			},
			setimg() {
				axios.get('/enhousesimg').then(function(res) {
					console.log(res)
				})
			},
			beforeUpload1(file, filelist) {
				console.log(file, filelist);
				let imgtype = 1
				const formData = new FormData()
				formData.append("file", file.raw)
				formData.append("imgtype", imgtype)
				axios.post('/uphousesimg', formData).then(function(res) {
					console.log(res)
				})
			},
			beforeUpload2(file, filelist) {
				console.log(file, filelist);
				let imgtype = 2
				const formData = new FormData()
				formData.append("file", file.raw)
				formData.append("imgtype", imgtype)
				axios.post('/uphousesimg', formData).then(function(res) {
					console.log(res)
				})
			},
			beforeUpload3(file, filelist) {
				console.log(file, filelist);
				let imgtype = 3
				const formData = new FormData()
				formData.append("file", file.raw)
				formData.append("imgtype", imgtype)
				axios.post('/uphousesimg', formData).then(function(res) {
					console.log(res)
				})
			},
			beforeUpload4(file, filelist) {
				console.log(file, filelist);
				let imgtype = 4
				const formData = new FormData()
				formData.append("file", file.raw)
				formData.append("imgtype", imgtype)
				axios.post('/uphousesimg', formData).then(function(res) {
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: left;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

	}

	.avatar-uploader {
		width: 80%;
		margin-left: 10%;
		margin-top: 15px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px solid gray;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
